<template>
  <div id="container" class="main" @click.sopt="onBaseClick">
    <div class="head">
      <div class="title">Cesium可视化演示</div>

      <div class="user_div">
        <div style="border: 0px solid #f00; box-sizing: border-box; padding-top: 8px">
          <el-icon class="user_icon" @click.stop="onMenuButtomClick(1)">
            <Search />
          </el-icon>
          <el-icon class="user_icon" @click.stop="onMenuButtomClick(2)">
            <House />
          </el-icon>
          <el-icon class="user_icon" @click.stop="onMenuButtomClick(3)">
            <Setting />
          </el-icon>
          <el-icon class="user_icon" @click.stop="onMenuButtomClick(4)">
            <Grid />
          </el-icon>
          <el-avatar
            size="small"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="cursor: pointer; margin-left: 30px"
            @click.stop="onUserClick"
          />
        </div>
      </div>
    </div>

    <div class="foot">
      <div></div>
      <div></div>
      <div style="text-align: right">
        Beijing FounderIntl Corp. &nbsp;&nbsp;&nbsp;&nbsp;@2024.08
      </div>
    </div>

    <div class="slide-menu-div" @mouseenter.stop="on_mouse_enter"></div>
  </div>

  <Transition name="slide_menu">
    <div v-if="show_slide_menu" class="slide-menu" @mouseleave.stop="on_mouse_left">
      <div class="slide-menu-title">
        <div>{{ slide_menu_title }}</div>
        <div class="slide-menu-close">
          <el-icon>
            <Close @click="show_slide_menu = false" />
          </el-icon>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-left">
          <component :is="comp_view"></component>
        </div>
        <div class="tab-right">
          <div
            v-for="(item, index) in menus"
            @click="onMenuClick(index)"
            :key="index"
            :class="{ __itemdiv: true, selected: sub_content_index == index }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </Transition>

  <Transition name="user_menu">
    <div v-if="show_user_info" class="user_info_div">
      <div class="user_name">
        <div>Admin(系统管理员)</div>
        <div></div>
        <div style="cursor: pointer" @click="show_user_info = false">退出</div>
      </div>

      <table width="100%" border="0">
        <tbody>
          <tr>
            <td>我的账户</td>
          </tr>
          <tr>
            <td>我的积分</td>
          </tr>
          <tr>
            <td>设置</td>
          </tr>
        </tbody>
      </table>
    </div>
  </Transition>
</template>

<script setup>
import { onMounted, reactive, ref, markRaw, inject } from "vue";

import { Close } from "@element-plus/icons-vue";

import BaseMap from "./components/Comp_BaseMap.vue";
import Terrain from "./components/Comp_Terrain.vue";
import ThreeD_Model from "./components/Comp_3DModel.vue";
import OBSG from "./components/Comp_OBSG.vue";
import Particle from "./components/Comp_Particle.vue";
import Dynamic from "./components/Comp_Dynamic.vue";
import Fe_Echart from "./components/Comp_Fe_Echart.vue";
import Fe_MapV from "./components/Comp_Fe_MapV.vue";
import Fe_Measure from "./components/Comp_Measure.vue";
import Fe_theme from "./components/Comp_Theme.vue";

const menus = reactive([
  {
    name: "基础底图",
    component: markRaw(BaseMap),
    img: "",
  },
  {
    name: "地理地形",
    component: markRaw(Terrain),
    img: "",
  },
  {
    name: "三维模型",
    component: markRaw(ThreeD_Model),
    img: "",
  },
  {
    name: "倾斜摄影",
    component: markRaw(OBSG),
    img: "",
  },
  /*
  {
    name: "粒子系统",
    component: markRaw(Particle),img:""
  },
  {
    name: "动态效果",
    component: markRaw(Dynamic),img:""
  },
  {
    name: "EChart",
    component: markRaw(Fe_Echart),img:""
  },
  {
    name: "MapV",
    component: markRaw(Fe_MapV),img:""
  },
  {
    name: "三维测量",
    component: markRaw(Fe_Measure),img:""
  }
    */

  {
    name: "专题图层",
    component: markRaw(Fe_theme),
    img: "",
  },
]);

const nzczm = markRaw(inject("nzczm"));

onMounted(() => {
  nzczm.init("container");
});

// -----------------------------------------------------------

let show_slide_menu = ref(false);
let show_user_info = ref(false);
let slide_menu_title = ref("开始");

const on_mouse_enter = (e) => {
  //console.log("on_mouse_enter", e);
  //if (!show_user_info.value) show_slide_menu.value = true;
};
const on_mouse_left = (e) => {
  //console.log("on_mouse_enter", e);
};

const onBaseClick = () => {
  show_user_info.value = false;
  show_slide_menu.value = false;
};

const onUserClick = () => {
  if (show_slide_menu.value) show_slide_menu.value = false;

  show_user_info.value = !show_user_info.value;
};

let sub_content_index = ref(0);
let comp_view = ref(menus[0].component);

const onMenuClick = (index) => {
  comp_view.value = menus[index].component;
  sub_content_index.value = index;
};

const onMenuButtomClick = (n) => {
  switch (n) {
    case 1:
      break;
    case 2:
      nzczm.home();
      break;
    case 3:
      break;
    case 4:
      if (!show_user_info.value) {
        show_slide_menu.value = !show_slide_menu.value;
      }
      break;
  }
};
</script>

<style lang="less">
@import "assets/css/app.less";
</style>
